<template>
  <div class="full-width">
    <div class="flex justify-between items-center cursor-pointer" @click="close = !close">
      <div>{{title}}</div>
      <div class="flex items-center">
        <div>{{close? `显示全部(${data.length})`:'收起'}}</div>
        <q-icon name="keyboard_arrow_down" size="16px" class="icon" :class="{'icon-close': !close}" />
      </div>
    </div>
    <div class="full-width row area" :class="{'close': close}">
      <div class="moudle-item col-lg-3 col-md-4 col-sm-6" v-for="(item,index) in data" :key="index">
        <div class="flex items-center cursor-pointer" @click="selITem(item)">
          <q-tooltip>{{item.name}} / {{item.tips}}</q-tooltip>
          <img :src="`statics/img/home/${item.icon}.svg`">
          <div style="padding-left: 10px;width: calc(100% - 72px)">
            <div class="font-size-16 text-ellipsis">{{item.name}}</div>
            <div style="padding: 4px 0;color: #999" class="text-ellipsis">{{item.tips}}</div>
            <div style="color: #E43434">
              <q-icon class="iconfont iconpingtaitubiao-531 font-size-18"></q-icon>
              {{item.popularity}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <moudle-detail ref="moudleDetail"/>
  </div>
</template>

<script>
import moudleDetail from './moudle-detail'
export default {
  name: 'moudle-area',
  data () {
    return {
      close: true
    }
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  components: {
    moudleDetail
  },
  methods: {
    selITem (item) {
      if (item.isComplete || this.type !== 'moudle') {
        this.$refs.moudleDetail.getData(item, this.type)
      } else {
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>敬请期待</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .area{
    transition all 1s
  }
  .close{
    max-height 402px
    overflow-y hidden
  }
  .icon{
    margin-left 10px
    transition transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
    &.icon-close{
      transform rotate(180deg)
    }
  }
  .moudle-item{
    padding 27px 10px
    img{
      width 72px
      height 72px
      display block
    }
  }
</style>
